<template>
  <div class="custom">
    <Editor class="editor" :style="{ width: isCollapse ? 'calc(100% - 50px)' : 'calc(100% - 0px)' }"
      @change-editor="changeEditor" language="java"/>
    <!-- <div class="custom-menu" :style="{ width: isCollapse ? '50px' : '200px' }">
      <h4>
        <span v-if="!isCollapse">代码片段</span>
        <el-icon @click="isCollapse = !isCollapse">
          <ArrowRight v-if="!isCollapse" />
          <ArrowLeft v-else />
        </el-icon>
      </h4>
      <span v-if="isCollapse">帮助</span>
      <el-menu default-active="" :collapse="isCollapse" @open="handleOpen" @close="handleClose" v-else>
        <el-menu-item index="1">
          <template #title>获取环境变量</template>
        </el-menu-item>
        <el-menu-item index="2">
          <template #title>设置环境变量</template>
        </el-menu-item>
        <el-menu-item index="3">
          <template #title>获取临时变量</template>
        </el-menu-item>
        <el-menu-item index="4">
          <template #title>设置临时变量</template>
        </el-menu-item>
        <el-menu-item index="5">
          <template #title>请求接口</template>
        </el-menu-item>
      </el-menu>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import Editor from '../Editor.vue'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
const isCollapse = ref(false)
const emit = defineEmits(['change-editor'])
/** 选项菜单打开 */
const handleOpen = () => {

}
/** 选项菜单收起 */
const handleClose = () => {

}
/** editor内容变更 */
const changeEditor = (content) => {
  emit('change-editor', content)
} 
</script>

<style scoped lang="scss">
.custom {
  display: flex;
  height: 100%;

  .editor {
    /* flex: 1; */
    height: 100%!important;
    
  }

  &-menu {
    width: 200px;

    h4 {
      display: flex;
      justify-content: space-between;

      .el-icon {
        cursor: pointer;
        margin-right: 5px;
      }
    }

    .el-menu {
      .el-menu-item {
        line-height: 35px;
        height: 35px;
      }
    }
  }

  h4 {
    font-weight: 500;
  }
}
</style>
